Skip to content

Switch Mermaid renderer and fix tab rendering#2659

Draft
theletterf wants to merge 14 commits intomainfrom
fix/mermaid-tab-rendering
Draft

Switch Mermaid renderer and fix tab rendering#2659
theletterf wants to merge 14 commits intomainfrom
fix/mermaid-tab-rendering

Conversation

@theletterf
Copy link
Contributor

@theletterf theletterf commented Feb 9, 2026

Summary

  • Switches from Beautiful Mermaid to standard MermaidJS for client-side diagram rendering.
  • Renders Mermaid diagrams only after their tab becomes active, avoiding hidden-layout errors and reducing first-render delay.
  • Sets the Mermaid theme to neutral.
  • Bumps mermaid to 11.12.3.
  • Replaces the complex flowchart example in docs/syntax/diagrams.md with a multi-tenant Azure architecture diagram showcasing nested subgraphs, per-subgraph direction overrides, and the hidden spacer node pattern.
  • Adds Jest coverage for visible and tab-activated Mermaid rendering.
  • Adds an intro Mermaid diagram example outside tabs.

Made with Cursor

Render Mermaid only after tab activation to avoid hidden layout errors and speed first render. Add Jest coverage and a simple intro diagram example.

Co-authored-by: GPT 5.2 Codex (Cursor) <gpt-5.2-codex@cursor>
Co-authored-by: Cursor <cursoragent@cursor.com>
@theletterf theletterf requested review from a team as code owners February 9, 2026 11:15
@theletterf theletterf requested a review from reakaleek February 9, 2026 11:15
Swap dependencies to use MermaidJS instead of Beautiful Mermaid.

Co-authored-by: Cursor <cursoragent@cursor.com>
@theletterf theletterf self-assigned this Feb 9, 2026
theletterf and others added 2 commits February 9, 2026 12:18
…as HTML

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
@github-actions
Copy link

github-actions bot commented Feb 9, 2026

🔍 Preview links for changed docs

theletterf and others added 2 commits February 9, 2026 12:27
DOMPurify's SVG profile strips <foreignObject> elements that Mermaid
uses for text labels, and combining svg+html profiles returns an empty
string entirely. Replace DOMPurify with lightweight regex sanitisation
that removes <script> tags and on* event handlers while preserving the
full SVG structure including foreignObject/XHTML content.

Co-authored-by: Claude Opus 4 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Replace regex-based script/event-handler stripping with DOMParser +
XMLSerializer. This addresses three CodeQL findings:

- Bad HTML filtering regexp (#56): regex missed </script > variants
- Incomplete multi-character sanitization (#57): nested on* attrs
- DOM text reinterpreted as HTML (#55): regex not robust enough

Also route the fullscreen modal SVG through sanitizeSvg.

Co-authored-by: Claude Opus 4 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
theletterf and others added 4 commits February 9, 2026 13:11
Return a DOM Node from sanitizeSvgNode instead of a serialised string
and use appendChild rather than innerHTML. This eliminates the "DOM
text reinterpreted as HTML" alerts (#55, #59) since no string is ever
assigned to innerHTML for diagram content.

Co-authored-by: Claude Opus 4 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…ring

Co-authored-by: Cursor <cursoragent@cursor.com>

# Conflicts:
#	src/Elastic.Documentation.Site/package.json
Co-authored-by: GPT 5.2 Codex (Cursor) <noreply@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
The strict XML parser (image/svg+xml) rejects void elements like <br>
inside <foreignObject> that Mermaid uses for text labels. Switching to
text/html uses the lenient HTML parser which handles these correctly.

Co-authored-by: GPT 5.2 Codex (Cursor) <noreply@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@theletterf
Copy link
Contributor Author

Trying with a different approach.

@theletterf theletterf closed this Feb 9, 2026
@theletterf theletterf reopened this Mar 3, 2026
…ample

- Bumps mermaid from 11.12.2 to 11.12.3.
- Sets Mermaid theme to 'neutral' in initialize config.
- Replaces the Painless Operators complex flowchart with a multi-tenant
  Azure architecture diagram showcasing nested subgraphs, per-subgraph
  direction overrides, and the hidden spacer node pattern.

Co-authored-by: Claude <claude@anthropic.com>
Made-with: Cursor
- Keep standard mermaid dependency, drop @theletterf/beautiful-mermaid.
- Take lodash ^4.17.23 from main (newer patch).
- Drop beautiful-mermaid color/icon constants from mermaid.ts.
- Keep Azure architecture diagram as the complex flowchart example.
- Deduplicate intro diagram (keep main's descriptive version).

Co-authored-by: Claude <claude@anthropic.com>
Made-with: Cursor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants